<template>
	<div class="wrap">
		<h1 class="title">公共设施管理</h1>
		<el-row :gutter="20" class="search">
			<el-col :span="3">
				<span>楼栋：</span>
				<el-input v-model="condition.buildId" class="input" />
			</el-col>
			<el-col :span="4">
				<span>设备名称：</span>
				<el-input v-model="condition.publicName" class="input" />
			</el-col>
			<el-col :span="2">
				<el-button class="btn" @click="handleSearch">
					<el-icon> <Search /></el-icon>
					搜索
				</el-button>
			</el-col>
			<el-col :span="2">
				<el-button class="btn" @click="drawer = true">
					<el-icon><CirclePlusFilled /></el-icon>
					添加设备
				</el-button>
			</el-col>
			<el-col :span="1">
				<el-button class="btn" @click="resetSearch"> 重置 </el-button>
			</el-col>
		</el-row>
		<!-- 公共设施表 -->
		<div class="table">
			<el-table
				:border="false"
				:data="publicInfo"
				:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
				:row-style="tableRowClassName">
				<el-table-column prop="publicName" label="设备名称" />
				<el-table-column prop="publicId" label="设备编号" />
				<el-table-column prop="buildId" label="地点">
					<template #default="{ row }"> {{ row.buildId }} 栋 </template>
				</el-table-column>
				<el-table-column prop="publicCount" label="设备数量" />

				<el-table-column prop="createTime" label="添加设备时间">
					<template #default="{ row }">
						{{ new Date(row.createTime).toLocaleDateString() }}
					</template>
				</el-table-column>

				<el-table-column prop="" label="操作">
					<template #default="{ row }">
						<el-button link class="btn-update" @click="modifyEquipment(row)">修改设备</el-button>
						<el-button link class="btn-del" @click="delEquipment(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total, sizes, prev, pager, next"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>

		<!-- 删除对话框 -->
		<DeleteDialog v-model:show="showDelDialog">
			<template #containt>
				<div class="containt">{{ delTargetPublic.publicName }} 设备</div>
			</template>
			<template #btn>
				<el-button link type="primary" @click="handleDelPublic">确认删除</el-button>
				<el-button link type="danger" @click="showDelDialog = false">取消</el-button>
			</template>
		</DeleteDialog>

		<!-- 添加设备抽屉 -->
		<el-drawer v-model="drawer" title="添加设备" direction="ltr" :show-close="false">
			<el-form :label-width="100" label-position="top" style="width: 300px">
				<el-form-item label="设备名称">
					<el-input v-model="publicDetials.publicName" />
				</el-form-item>
				<el-form-item label="楼栋">
					<el-select v-model.number="publicDetials.buildId">
						<el-option v-for="i in 20" :key="i" :label="`${i} 栋`" :value="i" />
					</el-select>
				</el-form-item>
				<el-form-item label="设备数量">
					<el-input-number v-model="publicDetials.publicCount" :min="1" :max="10" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-space :size="30">
					<el-button type="primary" plain @click="handleAddPublic">添加</el-button>
					<el-button type="danger" plain @click="drawer = false">取消</el-button>
				</el-space>
			</template>
		</el-drawer>
		<!-- 修改设备 -->
		<el-drawer v-model="drawerRight" title="修改设备" direction="rtl" :show-close="false">
			<el-form :label-width="100" label-position="top" :model="modtargetPublic" style="width: 300px">
				<el-form-item label="设备编号">
					<el-input v-model="modtargetPublic.publicId" readonly />
				</el-form-item>
				<el-form-item label="设备名称">
					<el-input v-model="modtargetPublic.publicName" />
				</el-form-item>
				<el-form-item label="楼栋">
					<el-select v-model="modtargetPublic.buildId">
						<el-option v-for="i in 20" :key="i" :label="`${i} 栋`" :value="i" />
					</el-select>
				</el-form-item>
				<el-form-item label="设备数量">
					<el-input-number v-model="modtargetPublic.publicCount" :min="1" :max="50" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-space :size="30">
					<el-button type="primary" plain @click="handleUpdatePublic">确认修改</el-button>
					<el-button type="danger" plain @click="drawerRight = false">取消</el-button>
				</el-space>
			</template>
		</el-drawer>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
	getAllBuildPublic,
	deletePublicByMan,
	getPublicName,
	getPublicOneName,
	addPublicByMan,
	updatePublicByMan,
} from '@/utils/axios/master'
import { Search } from '@element-plus/icons'
import DeleteDialog from '@/components/dialog/DeleteDialog.vue'
import { getPublicAll } from '@/utils/axios/getTotal'

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref()
const pageSizes = reactive([10, 20, 30])

// 公共设施信息
const publicInfo = ref([])
// 删除的目标设施
const delTargetPublic = ref({})
// 修改的目标公共设施
const modtargetPublic = ref({})

// 显示删除对话框
const showDelDialog = ref(false)

// 显示添加抽屉
const drawer = ref(false)
// 显示修改抽屉
const drawerRight = ref(false)

// 添加公共设施的信息
const publicDetials = reactive({
	buildId: '',
	publicName: '',
	publicCount: 1,
})
// 更新公共设施的信息

// 搜索条件
const condition = reactive({
	buildId: '',
	publicName: '',
})

// 处理更新设备
const handleUpdatePublic = async () => {
	await updatePublicByMan(modtargetPublic.value)
	await init()
	drawerRight.value = false
}
// 处理添加设备
const handleAddPublic = async () => {
	await addPublicByMan(publicDetials)
	await init()
	drawer.value = false
}

// 页面大小改变
const handleSizeChange =async (val) => {
	let { data } = await getAllBuildPublic({ currentPage: currentPage.value ,pageSize:val})
	publicInfo.value = data
}
const handleCurrentChange = async(val) => {
	let { data } = await getAllBuildPublic({ currentPage:val,pageSize:pageSize.value })
	publicInfo.value = data
}

// 处理搜索
const handleSearch = async () => {
	currentPage.value = 1
	let data = []
	condition.buildId
		? ({ data } = await getPublicOneName({ ...condition, currentPage: currentPage.value }))
		: ({ data } = await getPublicName(condition))
	publicInfo.value = data
}

// 重置搜索
const resetSearch = async () => {
	condition.buildId = ''
	condition.publicName = ''
	await init()
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

// 修改设备信息
const modifyEquipment = (val) => {
	modtargetPublic.value = val
	drawerRight.value = true
}
// 删除设备
const delEquipment = (val) => {
	delTargetPublic.value = val
	showDelDialog.value = true
}

// 处理删除设备请求
const handleDelPublic = async () => {
	await deletePublicByMan(delTargetPublic.value)
	await init()
	showDelDialog.value = false
}
async function init() {
	let { data } = await getAllBuildPublic({ currentPage: currentPage.value })
	let res=await getPublicAll()
	console.log(data);
	total.value=res.data
	publicInfo.value = data
}

onMounted(async () => {
	await init()
})
</script>

<style scoped lang="scss">
$color-del: #eb5d5dce;
$color-update: #3de1cece;
.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
	&-del {
		background-color: $color-del;
		color: #ffff;
	}
	&-update {
		background-color: $color-update;
		color: #ffff;
	}
}

.el {
	&-form {
		margin: auto;
		margin-top: 200px;
	}
}
.input {
	width: 100px;
}
.header {
	margin-bottom: 20px;
}
.search {
	margin-bottom: 20px;
}
</style>
